<template>
  <div>
    <!-- 整体大盒子 -->
    <div class="box">
      <!-- 标题 -->
      <div class="title">欢迎光临_vue开发的收银系统_水果店</div>
      <div class="box1">
        <!-- 折扣 -->
        <div class="appletitle">苹果10￥/斤 , 折扣8折</div>
        <!-- 购买斤数 -->
        <div class="shoop">
          <div>
            请输入你要购买的斤数
            <input type="number" placeholder="1" v-model="num" />
          </div>
          <button @click="fn">购买结账</button>
        </div>
        <!-- 结账单 -->
        <div class="jz">
          结账单：总价{{ price.a }}￥元 折后价：{{ price.b }}元 省了：{{
            price.c
          }}元
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      price: {
        a: 0,
        b: 0,
        c: 0,
      },
    };
  },
  methods: {
    fn() {
      if (this.num > 1 ? "1" : "0") return;
      const arr = { a: this.num * 10, b: this.num * 10 * 0.8, c: this.num * 2 };
      this.price = { ...arr };
    },
  },
};
</script>

<style scoped>
.box {
  width: 700px;
  height: 160px;
  /* background-color: red; */
  margin: 100px auto;
}
.title {
  /* background-color: pink; */
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-weight: 400;
}
.box1 {
  height: 129px;
  /* background-color: blue; */
  border: 2px solid #999;
  padding: 1px 1px;
}
.box1 .appletitle {
  /* background-color: green; */
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-weight: 700;
  border: 1px solid black;
  margin-bottom: 1px;
}
.box1 .shoop {
  text-align: center;
  height: 60px;
  /* line-height: 60px; */
  /* background-color: blanchedalmond; */
  border: 1px solid black;
  margin-bottom: 1px;
}
button {
  margin-top: 10px;
}
.jz {
  text-align: center;
  height: 30px;
  /* background-color: azure; */
  border: 1px solid black;
  line-height: 30px;
}
</style>
